<template>

  <el-row>
    <div style="padding-top: 10px;margin-bottom: 10px;margin-left: 15px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="go">
        <Icon type="md-close"/>
        关闭
      </el-button>
    </div>

    <Modal :mask-closable="false" v-model="busModelSetting.show" title="编辑" @on-cancel="handleReset" :transfer="false">
      <Form :model="busModelSetting" :label-width="120"  ref="uploadForm">
        <FormItem label="节点名称" prop="name">
          <Input v-model="busModelSetting.name" :disabled="disabled"></Input>
        </FormItem>
        <FormItem label="节点编码" prop="id">
          <Input v-model="busModelSetting.id" :disabled="disabled"></Input>
        </FormItem>
        <FormItem label="PC表单地址" prop="pcUrl">
          <Input v-model="busModelSetting.pcUrl" clearable></Input>
        </FormItem>
        <FormItem label="移动表单地址" prop="mobileUrl">
          <Input v-model="busModelSetting.mobileUrl" clearable></Input>
        </FormItem>


      </Form>
      <div slot="footer">
        <el-button type="primary" @click="handler" >确定</el-button>
        <el-button @click="handleReset('informed')">取消</el-button>
      </div>

    </Modal>

    <div class="main-div" style="margin-top: 10px">

      <Card style="margin-bottom: 10px;margin-top: 10px">
        <p slot="title">业务表单设置</p>
        <el-table :data="tableNodeData" border fit highlight-current-row style="width: 100%">
          <el-table-column label="节点名称"
                           prop="name"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="节点编码"
                           prop="id"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="pc表单地址"
                           prop="pcUrl"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="移动表单地址"
                           prop="mobileUrl"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="edit(scope.row,scope.$index)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </Card>



    </div>


  </el-row>


</template>

<script>
  import {getAllActivityAndBusinessFormSettingModelModel, saveBusinessFormSettingModel} from "@/api/busModel";
  import {getScript} from "@/api/analy";

  export default {
    name: 'Task',
    components: {},
    data() {

      return {
        queryForm: {
          script: "",
          nameOrCategory: "",
          page: 1,
          pageSize: 10,
          limit: 10,
        },
        ueditor: {
          value: '',          //编辑器默认内容
          config: {           //设置编辑器宽高
            initialFrameWidth: null,
            initialFrameHeight: 350
          }
        },
        addModel: false,
        scriptId: '',
        scriptInfo: {},
        addForm: {
          id: "",
          nodeName: "",
          emailContent: "",
        },
        batchForm: {
          id: "",
          type: [],
          emailContent: "",
        },
        disabled:true,
        busModelSetting:{
          id:'',
          name:'',
          pcUrl:'',
          mobileUrl:'',
          show:false
        },
        tableData: [],
        tableNodeData: [],
        existData: [],
        msgData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal: false,
        show: false,
        index: 0,
        existData: []
      }
    },
    mount() {

    },
    created() {
      // this.getData()
      var query = this.$route.query;
      this.addForm.id = query.id;
      if (query.id) {
        //初始化数据
        this.getAllActivityAndSequence(query.id)

      }
    },
    methods: {
      handleReset(){
        this.index=null;
        var   busModelSetting={
            id:'',
            name:'',
            pcUrl:'',
            mobileUrl:'',
            show:false
          }
        this.busModelSetting=busModelSetting

      },
      handler(){
        this.tableNodeData[this.index].id= this.busModelSetting.id;
        this.tableNodeData[this.index].name= this.busModelSetting.name;
        this.tableNodeData[this.index].pcUrl= this.busModelSetting.pcUrl;
        this.tableNodeData[this.index].mobileUrl= this.busModelSetting.mobileUrl;
        this.busModelSetting.show=false

      },
      edit(row,index){
        this.index=index;
        this.busModelSetting.id=row.id;
        this.busModelSetting.name=row.name;
        this.busModelSetting.pcUrl=row.pcUrl;
        this.busModelSetting.mobileUrl=row.mobileUrl;
        this.busModelSetting.show=true
      },
      rowClick(row) {
        this.scriptId = row.scriptId;
        this.scriptInfo = row;
      },
      confirmDialog: function (data) {

        var scriptId = this.scriptId
        this.tableNodeData[this.index].skipExpress = this.scriptInfo.script
        this.show = false
      },
      handleCurrentChange(val) {

        this.queryForm.page = val
        this.getData()
      },
      getData: function () {
        getScript(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);
          this.checkTableData = [];
        })
      },

      delCommonUsers: function (index, index2) {
        this.index = index2;
        this.handleCurrentChange(1)
        this.show = true
      },
      selectAddSignUsers: function (index) {
        this.index = index
        try {
          var node = this.tableData[this.index]
          if (node.activeName == 'created') {
            this.existData = node.userCreatedNotify
          } else {
            this.existData = node.userCompletedNotify
          }
        } catch (e) {
          this.existData = []
        }
        this.show = true
      },
      onSubmit: function () {
      },
      chooseBatch: function (type) {
        var flag = false;
        var exist = this.batchForm.type;
        if (exist.length == 0) {

        } else {
          if (exist.includes(type)) {
            console.log("选中");
            flag = true;

          } else {
          }
        }
        this.tableData.forEach((item, index, array) => {
          //执行代码
          if (type == 'enable') {
            item['enable'] = flag
          }
          if (type == 'emailCompleted') {
            item['emailCompleted'] = flag
          }
          if (type == 'msgCreated') {
            item['msgCreated'] = flag
          }
          if (type == 'msgCompleted') {
            item['msgCompleted'] = flag
          }
          if (type == 'created') {
            if (flag) {
              item['eventTypes'].push('created')
            } else {
              var index = item['eventTypes'].indexOf('created');
              if (index > -1) {
                item['eventTypes'].splice(index, 1);
              }
            }
          }
        })


      },
      getAllActivityAndSequence: function (id) {
        getAllActivityAndBusinessFormSettingModelModel(id).then((response2) => {
          if (response2.code == 0) {
            var data = response2.data;
            this.tableNodeData = data;
          }
        })


      },
      go: function () {
        this.$router.go(-1)
      },
      close: function () {
        this.$store.dispatch('tagsView/delView', this.$route)
// 返回上一步路由
        this.$router.go(-1)
      },
      save: function () {
        saveBusinessFormSettingModel(this.addForm.id, this.tableNodeData).then((response2) => {
          if (response2.code == 0) {
            this.close();
          }
        })
      },

    }

  }

</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }

  .input_w {
    width: 40% !important;
  }

  .task-card {
    margin-top: 10px;
  }

  .item {
    display: block;
    margin-top: 20px;
    box-shadow: 0 0 20px 0 rgba(204, 207, 227, .45);
    margin-bottom: 10px;

  }

  .left {
    font-size: 16px;
    color: #575757;
  }

  img {
    width: 60px;
    height: 60px;
  }

</style>
